<template>
  <div>
    <nav-bar title="巡检登记"></nav-bar>
    <div class="maxinBox">
      <van-form>
        <van-field
          v-model="inspectionName"
          name="巡检点名称"
          label="巡检点名称"
          disabled
        />
        <van-field required name="radio" label="巡检结果">
          <template #input>
            <van-radio-group v-model="form.result" direction="horizontal">
              <van-radio :name='0'>正常</van-radio>
              <van-radio :name='1'>异常</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          class="textarea"
          type="textarea"
          v-model="inspectionRequire"
          name="巡检点要求"
          label="巡检点要求"
          disabled
        />
        <van-field
          class="textarea marginTop5"
          type="textarea"
          v-model="form.troubleDesc"
          name="巡检描述"
          label="巡检描述"
          required
          placeholder="请输入巡检情况/异常原因"
        />
        <van-cell required title="问题类别" v-model="quistionType" @click="show = true" />
        <van-action-sheet v-model="show" :actions="quistionsList" @select="onSelect" />
        <van-field required name="uploader" label="上传照片">
          <template #input>
            <van-uploader multiple :max-count="3" v-model="imagesList" :after-read="afterRead" />
          </template>
        </van-field>
        <van-cell class="marginTop5" title="巡检记录" is-link @click="onWatchmanList" />
        <div class="marginTop5 backgroundfff" style="padding: 0.625rem 1.875rem;">
          <van-button round block type="info" native-type="onSubmit" @click="onSubmit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
  import realTimeInspectionAPI from '../../../../api/workAPI/realTimeInspectionAPI.js'
  import fixedInspectionApi from '../../../../api/workAPI/fixedInspectionAPI.js'
  import dashbordAPI from '../../../../api/dashbordAPI.js'
  export default {
    data() {
      return {
        form: {
          pointId: JSON.parse(localStorage.getItem('fixedInspectionScan')).points.id,
          id: JSON.parse(localStorage.getItem('fixedInspectionScan')).id,
          result: '',
          troubleDesc: '',
          troubleAttachmentList: [],
          category: ''
        },
        quistionType: '',
        inspectionName: JSON.parse(localStorage.getItem('fixedInspectionScan')).points.pointName,
        inspectionRequire: JSON.parse(localStorage.getItem('fixedInspectionScan')).points.checkListDesc,
        imagesList:[],
        show: false,
        quistionsList: [],
      }
    },
    methods: {
      afterRead(file) {
        dashbordAPI.uploadAvatar(file.file).then(res => {
          this.form.troubleAttachmentList.push(res.fileUrl)
        })
      },
      // 查询问题列表
      getQuistionsList() {
        realTimeInspectionAPI.getQuistionsList().then(res => {
          this.quistionsList = res.map(item => {
            return {
              name: item.text,
              value: item.value
            }
          })
        })
      },
      // 跳转巡检记录
      onWatchmanList() {
        this.$router.push({
          name: 'InspectionRecord'
        })
      },
      // 提交表单
      onSubmit() {
        if (this.form.result === '') {
          this.$toast.fail('请选择巡检结果');
          return;
        } else {
          if (this.form.result === 1) {
            if (!this.form.troubleDesc) {
              this.$toast.fail('请输入巡检描述')
              return;
            }
            if (!this.form.category) {
              this.$toast.fail('请选择问题类别')
              return;
            }
            if (!this.form.troubleAttachmentList.length) {
              this.$toast.fail('请上传图片')
              return;
            }
          }
        }
        this.$dialog.confirm({
          title: '温馨提示',
          message: '提交后信息无法修改，请确认信息无误',
        })
          .then(() => {
            fixedInspectionApi.taskRecord(this.form).then(res => {
              this.$toast('提交成功')
              this.$router.push({
                name: 'FixedInspection'
              })
            })
          })
          .catch(() => {
            // on cancel
          });
      },
      // 问题类别选择
      onSelect(item) {
        this.show = false;
        this.form.category = item.value
        this.quistionType = item.name
      },
    },
    mounted() {
      this.getQuistionsList()
    }
  }
</script>

<style scoped lang="scss">
/deep/ .textarea .van-field__control{
  height: 7.5rem
}
</style>
